<template>
    <div>
        <hs-breadcrumb :breadcrumb="breadcrumb"></hs-breadcrumb>
        <Card :bordered="false" :style="{marginBottom:'10px'}">
            <div class="hs-screen-row">
                <Input v-model="params.username" placeholder="账号" clearable style="width: 200px"/>
            </div>
            <div class="hs-screen-row">
                <Input v-model="params.nickName" placeholder="昵称" clearable style="width: 200px"/>
            </div>
            <div class="hs-screen-row">
                <Select v-model="params.level" placeholder="用户等级" clearable style="width:200px">
                    <Option value="">全部</Option>
                    <Option value="0">普通用户</Option>
                    <Option value="1">体验员</Option>
                    <Option value="2">销售经理</Option>
                    <Option value="3">销售总监</Option>
                    <Option value="4">董事</Option>
                </Select>
            </div>
            <div class="hs-screen-row">
                <Select v-model="params.isDisable" placeholder="状态" clearable style="width:200px">
                    <Option value="">全部</Option>
                    <Option value="0">已启用</Option>
                    <Option value="1">已禁用</Option>
                </Select>
            </div>
            <div class="hs-screen-row">
                <DatePicker @on-change="changeDate" v-model="dateInit" type="daterange" :editable="false"
                            separator=" ~ " split-panels transfer
                            placeholder="创建时间" style="width: 200px"></DatePicker>
            </div>
            <div class="hs-screen-row">
                <Button type="primary" @click="findList">查询</Button>
            </div>
            <div class="hs-screen-row">
                <Button @click="resetScreen">重置</Button>
            </div>
        </Card>

        <Card :bordered="false" :style="{marginBottom:'10px'}">
            <!--标题-->
            <div slot="title">
                <div class="hs-screen-box">
                    <div>用户列表</div>
                    <div>
                        <ButtonGroup>
                            <Button @click="findList">
                                <Icon type="md-refresh" size="15"/>
                            </Button>
                            <Button @click="isSendShareDividends">手动发放红包</Button>
                            <Button @click="showUserCapitalAll">资金修改记录</Button>
                        </ButtonGroup>
                    </div>
                </div>
            </div>
            <!--表格数据-->
            <Table :columns="columns" :data="data" size="small" :stripe="true" :loading="isTableLoading">

                <template slot-scope="{ row, index }" slot="isDisable">
                    <Tag color="green" v-if="row.isDisable === 0" size="default">启用</Tag>
                    <Tag color="volcano" v-if="row.isDisable === 1" size="default">禁用</Tag>
                </template>

                <template slot-scope="{ row, index }" slot="level">
                    <span v-if="row.level === 0">普通用户</span>
                    <span v-if="row.level === 1">体验员</span>
                    <span v-if="row.level === 2">销售经理</span>
                    <span v-if="row.level === 3">销售总监</span>
                    <span v-if="row.level === 4">董事</span>
                </template>

                <template slot-scope="{ row }" slot="action">
                    <Button type="primary" size="small" style="margin-right: 5px" @click="showUserOpe(1, row)">查看
                    </Button>
                    <template v-if="row.isDisable === 0">
                        <Button type="error" size="small" style="margin-right: 5px" @click="isDisableUser(row)">禁用
                        </Button>
                    </template>
                    <template v-if="row.isDisable === 1">
                        <Button type="success" size="small" style="margin-right: 5px" @click="isDisableUser(row)">启用
                        </Button>
                    </template>


                    <Dropdown transfer trigger="click">
                        <Button size="small">
                            <Icon type="ios-more" size="22"/>
                        </Button>
                        <DropdownMenu slot="list">
                            <DropdownItem @click.native="showUserCapital(row, '1')">余额记录</DropdownItem>
                            <DropdownItem @click.native="showUserCapital(row, '2')">知豆记录</DropdownItem>
                            <DropdownItem @click.native="showUserEditBalance(row, 3)">修改资金</DropdownItem>
                            <DropdownItem @click.native="showUserRelationship(row, 'parent')">上级</DropdownItem>
                            <DropdownItem @click.native="showUserRelationship(row, 'children')">下级</DropdownItem>
                            <DropdownItem @click.native="isClearUserPwd(row)">清除交易密码</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                </template>
            </Table>
            <!--分页-->
            <div class="hs-page">
                <Page :total="total" show-sizer show-total transfer @on-change="changePage"
                      @on-page-size-change="changePageSize"/>
            </div>
        </Card>

        <!--显示模态框-->
        <user-ope ref="userOpe" @changeDate="findList"></user-ope>
        <!-- 显示用户关系 -->
        <user-relationship ref="userRelationship"></user-relationship>
        <!-- 显示用户资金记录 -->
        <user-capital ref="userCapital"></user-capital>
        <!-- 显示修改余额 -->
        <user-edit-balance ref="userEditBalance" @changeDate="findList"></user-edit-balance>
        <!-- 显示所有用户的修改资金记录 -->
        <user-capital-all ref="userCapitalAll"></user-capital-all>
    </div>
</template>

<script>
    import hsBreadcrumb from '@/components/hs-breadcrumb';
    import userOpe from './components/user-ope';
    import userRelationship from './components/user-relationship';
    import userCapital from './components/user-capital';
    import userEditBalance from './components/user-edit-balance';
    import userCapitalAll from './components/user-capital-all';

    export default {
        name: "user",
        data() {
            return {
                total: 0,
                dateInit: '',
                isTableLoading: false,
                // 参数
                params: {
                    page: 1,
                    rows: 10,
                    username: '',
                    nickName: '',
                    level: '',
                    startTime: '',
                    endTime: '',
                    isDisable: '',
                },
                // 表格列
                columns: [
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'ID',
                        minWidth: 120,
                        key: 'userId'
                    },
                    {
                        title: '账号',
                        minWidth: 120,
                        key: 'username'
                    },
                    {
                        title: '昵称',
                        minWidth: 180,
                        key: 'nickName'
                    },
                    {
                        title: '邀请码',
                        minWidth: 120,
                        key: 'inviteCode'
                    },
                    {
                        title: '余额（元）',
                        minWidth: 120,
                        key: 'amount'
                    },
                    {
                        title: '知豆（个）',
                        minWidth: 120,
                        key: 'integral'
                    },
                    {
                        title: '会员等级',
                        minWidth: 120,
                        slot: 'level'
                    },
                    {
                        title: '状态',
                        slot: 'isDisable',
                        align: 'center',
                        width: 120
                    },
                    {
                        title: '创建时间',
                        key: 'createTime',
                        width: 150
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 180,
                        align: 'center'
                    }
                ],
                // 表格数据
                data: [],
                // 面包屑
                breadcrumb: [
                    {name: '首页', url: '', icon: 'ios-home-outline', size: 18},
                    {name: '系统管理', url: '', icon: '', size: 0},
                    {name: '用户列表', url: '', icon: '', size: 0}
                ]
            }
        },
        created() {
            // 用户-列表查询
            this.findList();
        },
        methods: {
            // 用户-列表查询
            findList() {
                this.isTableLoading = true;
                this.axios.post('/user/findList', this.params).then(res => {
                    
                    this.isTableLoading = false;
                    if (res.status == 200) {
                        this.total = res.data.total;
                        this.data = res.data.rows;
                    }
                    if (res.status == 500) {
                        this.$Notice.error({
                            title: '服务器内部错误',
                            desc: '查询用户列表接口报错',
                            duration: 0
                        });
                    }
                })
            },
            // 是否清除用户密码
            isClearUserPwd(row) {
                this.$Modal.confirm({
                    title: `是否清除用户${row.username}的交易密码？`,
                    onOk: () => {
                        // this.$Message.info('您点击了确定.');
                        this.clearUserPwd(row);
                    },
                    onCancel: () => {
                        this.$Message.info('您点击了取消.');
                    }
                });
            },
            // 是否删除用户
            isDelUser(row) {
                // console.log(row)
                this.$Modal.confirm({
                    title: `是否删除用户${row.username}？`,
                    onOk: () => {
                        // this.$Message.info('您点击了确定.');
                        this.deleteAdmin(row);
                    },
                    onCancel: () => {
                        this.$Message.info('您点击了取消.');
                    }
                });
            },
            // 是否禁用用户
            isDisableUser(row) {
                // console.log(row)
                this.$Modal.confirm({
                    title: `是否${row.isDisable ? '开启' : '禁用'}用户${row.nickName}？`,
                    onOk: () => {
                        this.disableUser(row);
                    },
                    onCancel: () => {
                        this.$Message.info('您点击了取消.');
                    }
                });
            },
            // 是否手动发放红包
            isSendShareDividends() {
                // console.log(row)
                this.$Modal.confirm({
                    title: `警告`,
                    content:'您将对所有用户进行手动发放红包，确定发放？',
                    onOk: () => {
                        this.sendShareDividends();
                    },
                    onCancel: () => {
                        this.$Message.info('您点击了取消.');
                    }
                });
            },
            // 重置用户密码
            clearUserPwd(row) {
                this.$Spin.show();
                this.axios.post('/user/clearUserPwd', {
                    userId: row.userId
                }).then(res => {
                    
                    setTimeout(() => {
                        this.$Spin.hide();
                    }, 300);
                    if (res.status == 200) {
                        this.$Message.success('操作成功.');
                    }
                    if (res.status == 500) {
                        this.$Notice.error({
                            title: '服务器内部错误',
                            desc: '重置用户密码接口报错',
                            duration: 0
                        });
                    }
                })
            },
            // 删除用户
            deleteAdmin(row) {
                this.$Spin.show();
                this.axios.post('/adminUser/deleteAdmin', {
                    adminId: row.adminId
                }).then(res => {
                    
                    setTimeout(() => {
                        this.$Spin.hide();
                    }, 300);
                    if (res.status == 200) {
                        this.$Message.success('操作成功.');
                        this.findList();
                    }
                    if (res.status == 201) {
                        // this.$Message.error(res.msg);
                        this.$Notice.error({
                            title: '删除用户失败',
                            desc: res.msg
                        });
                    }
                    if (res.status == 500) {
                        this.$Notice.error({
                            title: '服务器内部错误',
                            desc: '删除用户接口报错',
                            duration: 0
                        });
                    }
                })
            },
            // 禁用或开启用户
            disableUser(row) {
                this.$Spin.show();
                this.axios.post('/user/disableUser', {
                    userId: row.userId,
                    isDisable: row.isDisable ? 0 : 1
                }).then(res => {
                    
                    setTimeout(() => {
                        this.$Spin.hide();
                    }, 300);
                    if (res.status == 200) {
                        this.$Message.success('操作成功.');
                        this.findList();
                    }
                    if (res.status == 500) {
                        this.$Notice.error({
                            title: '服务器内部错误',
                            desc: '禁用用户接口报错',
                            duration: 0
                        });
                    }
                })
            },
            // 手动发放红包
            sendShareDividends() {
                this.$Spin.show();
                this.axios.post('/orderVip/sendShareDividends').then(res => {
                    
                    setTimeout(() => {
                        this.$Spin.hide();
                    }, 300);
                    if (res.status == 200) {
                        this.$Message.success('操作成功.');
                    }
                    if (res.status == 201) {
                        this.$Message.error(res.msg);
                    }
                    if (res.status == 500) {
                        this.$Notice.error({
                            title: '服务器内部错误',
                            desc: '手动发放红包接口报错',
                            duration: 0
                        });
                    }
                })
            },
            // 显示操作模态框
            showUserOpe(type, row) {
                /**
                 * type判断
                 * 1.查看 2.新增 3.编辑
                 */
                this.$refs.userOpe.show(type, row);
            },
            // 显示操作模态框
            showUserEditBalance(row, type) {
                /**
                 * type判断
                 * 1.查看 2.新增 3.编辑
                 */
                this.$refs.userEditBalance.show(row, type);
            },
            // 显示用户关系
            showUserRelationship(row, type) {
                this.$refs.userRelationship.showModal(row, type);
            },
            // 显示用户自己记录
            showUserCapital(row, type) {
                /**
                 * type判断
                 * 1.余额 2.积分
                 */
                this.$refs.userCapital.show(row, type);
            },
            // 显示用户自己记录
            showUserCapitalAll() {
                this.$refs.userCapitalAll.show();
            },
            // 日期条件赋值
            changeDate(e) {
                this.params.startTime = e[0];
                this.params.endTime = e[1];
            },
            // 重置筛选条件
            resetScreen() {
                this.params.username = '';
                this.params.nickName = '';
                this.params.level = '';
                this.params.isDisable = '';
                this.params.startTime = '';
                this.params.endTime = '';
                this.dateInit = '';
            },
            // 改变页数
            changePage(e) {
                this.params.page = e;
                this.findList();
            },
            // 改变页容量
            changePageSize(e) {
                this.params.rows = e;
                this.findList();
            },
        },
        components: {
            hsBreadcrumb,
            userOpe,
            userRelationship,
            userCapital,
            userEditBalance,
            userCapitalAll
        }
    }
</script>

<style scoped>

</style>